<!-- 生产信息v2 -->
<script lang="jsx" setup>
import { reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import { SearchOutlined } from '@ant-design/icons-vue';
import { getTechniqueDetail, getTechniqueList } from '@/service/api/modules/trace/one-code-trace';

const processList = ref([]);
const isGetOk = ref(false);
const tableRef = ref(null);
const lotId = ref(null);
const loading = ref(false);
const tableData = ref([]);
const selectRef = ref(null);

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'techId',
    dataIndex: 'techId',
    title: '工艺代码',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'inTechname',
    dataIndex: 'inTechname',
    title: '工艺名称',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    customFilterDropdown: true,
    customRender: ({ record }) => {
      if (record.qty && record.createBy) {
        return <span class="color-green font-bold">{record.inTechname}</span>;
      }
      return <span class="color-#aeaeae font-bold">{record.inTechname}</span>;
    },
    onFilter: (value, record) =>
      record.inTechname
        .toString()
        .toLowerCase()
        .includes(value?.toLowerCase() || null)
  },

  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '过站人',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '过站数量',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.qty) {
        return `${record.qty}(${record.unit})`;
      }
      return '';
    }
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '过站时间',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'remark',
  //   dataIndex: 'remark',
  //   title: '备注',
  //   fixed: 'left',
  //   align: 'center',
  //   checked: true,
  //   // width: 200,
  //   ellipsis: true
  // }
];

const handleChange = (pagination, filters, sorter) => {
  console.log('Various parameters', pagination, filters, sorter);
  filteredInfo.value = filters;
  sortedInfo.value = sorter;
};

const clearFilters = () => {
  filteredInfo.value = null;
};

const handleReset = clearFilters => {
  clearFilters();
  state.searchText = '';
};

const state = reactive({
  searchText: '',
  searchedColumn: ''
});

const handleSearch = (selectedKeys, confirm, dataIndex) => {
  confirm();
  state.searchText = selectedKeys[0];
  state.searchedColumn = dataIndex;
};

function getTechniqueListData() {
  if (isGetOk.value) return;
  loading.value = true;
  getTechniqueDetail({ lotId: lotId.value })
    .then(({ data, error }) => {
      if (!error) {
        console.log('data', data);
        data.forEach((item, index) => {
          item.tableUuid = UUID.generate();
          item.dataIndex = index + 1;
        });
        tableData.value = data;
        isGetOk.value = true;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

function getProcessList() {
  getTechniqueList(lotId.value).then(({ data, error }) => {
    if (!error) {
      processList.value = data;
    }
  });
}

function setCurrentLotId(value) {
  lotId.value = value;
}

function reset() {
  tableData.value = [];
  processList.value = [];
  isGetOk.value = false;

  console.log('重置成功');
}

defineExpose({
  setCurrentLotId,
  getTechniqueListData,
  getProcessList,
  reset
});
</script>

<template>
  <div class="production-information-table h-full w-full">
    <Table
      ref="tableRef"
      :column="column"
      :show-row-selection="false"
      :data-source="tableData"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      row-key="tableUuid"
      :is-pagination="false"
      class="h-full"
      :loading="loading"
      :show-card-header="false"
      :row-height="40"
    >
      <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
        <div class="p-8px">
          <!--
 <AInput
            ref="searchInput"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @press-enter="handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
-->

          <ASelect
            ref="selectRef"
            class="mb-8px block w-188px"
            placeholder="请选择工序"
            show-search
            :value="selectedKeys[0]"
            allow-clear
            @change="
              e => {
                setSelectedKeys([e]);
                handleSearch(selectedKeys, confirm, column.dataIndex);
              }
            "
          >
            <ASelectOption v-for="item in processList" :key="item" :value="item">{{ item }}</ASelectOption>
          </ASelect>

          <AButton
            type="primary"
            size="small"
            class="mr-8px w-90px"
            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            <template #icon><SearchOutlined /></template>
            搜索
          </AButton>
          <AButton size="small" class="w-90px" @click="handleReset(clearFilters)">重置</AButton>
        </div>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped>
.production-information-table {
  padding-top: 10px;
  :deep(.ant-card) {
    .ant-card-body {
      padding-bottom: 0;
      .surely-table-wrapper {
        .ant-spin-nested-loading {
          .surely-table-column-title {
            color: #646cff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
